import React, { Component } from 'react';
//import { createRoot } from 'react-dom/client';
import ReactDOM from 'react-dom';
//const root = createRoot(document.getElementById('root'))
class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    handleClick = () => {
        this.setState((state) => ({ count: state.count + 1 }), () => {
            //此回调函数是在状态变更之后执行
            console.log('callback1', this.state.count)
        })
        console.log('render1', this.state.count)
        this.setState((state) => ({ count: state.count + 1 }), () => {
            //此回调函数是在状态变更之后执行
            console.log('callback2', this.state.count)
        })
        console.log('render2', this.state.count)
        // let arr = [
        //     {count:3},
        //     (state)=>({ count: state.count + 1 })
        // ]
        // let state = {count:2};
        // state = {count:3}
        // state = {count:4}
        setTimeout(() => {
            //这个功能是react18新功能，在React18之前，在setTimeout里更新完全 同步的 0 0 2 3=>3
            //在React18之后，setTimeout里的更新也是异步的，也是批量的 0 0 1 1 => 2
            this.setState({ count: this.state.count + 1 }, () => {
                //此回调函数是在状态变更之后执行
                console.log('callback3', this.state.count)
            })
            console.log('render3',this.state.count)
            this.setState((state)=>({ count: state.count + 1 }), () => {
                //此回调函数是在状态变更之后执行
                console.log('callback4', this.state.count)
            })
            console.log('render4',this.state.count)
        });
    }
    render() {
        console.log('render')
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}
let element = <Counter />
ReactDOM.render(element,document.getElementById('root'));
//root.render(element);
//ReactDOM.render(element,document.getElementById('root'));
//setState 重新调用render>重新计算虚拟DOM>比较老和新的虚拟DOM>更新真实DOM
//1办法 (event)=>this.handleClick1(event)
//2办法 const bindedHandleClick1 = this.handleClick1.bind(this);
//3办法 箭头函数